<template>
    <div>
        <h2>{{ num1 }} <button @click="num1++">自增</button></h2>
        <h2>{{ num2 }} <button @click="num2++">自增</button></h2>
        <h2>{{ number }}</h2>
        <hr>
        <Test></Test>
    </div>

</template>



<script setup>
import { watch, ref } from 'vue'
import Test from './components/Test.vue';
const num1 = ref(10)
const num2 = ref(20)
const number = ref(30)
// 接受三个参数，侦听源，回调函数（两个参数：当前值，更新前的值），侦听配置
// watch( num1,(newVal,oldVal)=>{ 
//     console.log(newVal,oldVal);
//     number.value=newVal+num2.value
// },{immediate:true})
// watch( num2,(newVal,oldVal)=>{ 
//     console.log(newVal,oldVal);
//     number.value=newVal+num1.value
// },{immediate:true})

watch([num1,num2],(newValue,oldValue)=>{
    number.value= newValue[0] + newValue[1]
},{immediate:true})



</script>



<style scoped></style>